<template>
	<view class="list_box">
		<slot name="list" :list="list"></slot>
		<view class="empty" v-if="list?.length == 0">
			<image class="image" src="@/static/img/empty.png" mode="aspectFill"></image>
		</view>
		<uv-load-more :status="status" marginTop="60rpx" />
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
	</view>
</template>
<script lang="ts" setup>
	import { ref, defineProps } from 'vue';
	import { http } from '@/common/http/index';
	import { onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';

	// 使用defineProps定义接收的props  
	const props = defineProps({
		url: {
			type: String,
			default: ''
		},
		req: {
			type: Object,
			default: {}
		},
		res: {
			type: String,
			default: ''
		}
	});

	const list = ref([]) as any;
	const page = ref(1);
	const status = ref('loadmore');
	const scrollTop = ref(0);

	const init = () => {
		page.value = 1;
		list.value = [];
		getlist();
	}

	onReachBottom(() => {
		if (status.value == 'loadmore') {
			getlist();
		}
	});

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	onPullDownRefresh(() => {
		page.value = 1;
		list.value = [];
		getlist();
	});

	const getlist = () => {
		status.value = 'loading';
		const params = {
			pageNum: page.value,
			...props.req
		}

		http
			.get(props.url, { params })
			.then((res : any) => {

				let response = res

				props.res.split('.').map((item) => {
					response = response?.[item]
					console.log(response);
				})


				if (response.length == 0) {
					status.value = 'nomore';
				} else {
					list.value = [...list.value, ...response];
					if (res.rows?.length == 10) {
						status.value = 'loadmore';
						page.value++;
					} else {
						status.value = 'nomore';
					}
				}
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 800);
			})
			.catch((err) => {
				status.value = 'nomore';
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 800);
			});
	};

	defineExpose({ init });
</script>
<style lang="scss" scoped>
	.empty {
		display: flex;
		justify-content: center;
		padding: 120rpx 0 20rpx 0;

		.image {
			width: 300rpx;
			height: 300rpx;
			display: block;
		}
	}
</style>